<style scoped lang="scss">
.vaccine-time-checker {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background: #f5f5f5;
  .top {
    width: 100%;
    height: 40px;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .born {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    margin-left: 25px;
    margin-top: 18px;
    span img {
      height: 70px;
    }
    .born-time1 {
      margin-left: 20px;
      color: #f3637a;
    }
    .born-time2 {
      margin-left: 15px;
      font-size: 12px;
      color: #999;
      margin-top: 5px;
    }
  }
  .vaccine {
    width: 100%;
    margin-top: 10px;
    dl {
      width: 93%;
      height: 80px;
      background: #fff;
      margin: 2px 5px;
      margin-left: 10px;
      .must {
        float: left;
        margin-right: 10px;
        height: 20px;
        width: 33px;
        text-align: center;
        margin-top: 15px;
        font-size: 12px;
        background: #fba5b3;
        color: #fff;
        line-height: 20px;
        margin-left: 15px;
      }
      .selfFunded {
        float: left;
        margin-right: 10px;
        height: 20px;
        width: 33px;
        text-align: center;
        margin-top: 15px;
        font-size: 12px;
        background: #62c0ff;
        color: #fff;
        line-height: 20px;
        margin-left: 15px;
      }
      // dd{
      //  margin-left: 40px;
      //  height: 30px;

      // }
      .bcg {
        width: 290px;
        height: 33px;
        line-height: 50px;
        margin-top: 3px;
        margin-left: 40px;
        .number {
          margin-left: 5px;
          font-size: 14px;
          color: #a9a9a9;
        }
      }
      .explain {
        margin-top: 10px;
        margin-left: 57px;
        font-size: 14px;
        color: #999;
      }
    }
  }
}
</style>

<template>
  <van-nav-bar
    title="疫苗时间"
    left-arrow
    @click-left="onClickLeft"
    van-nav-bar-icon-color="black"
  />
  <div class="vaccine-time-checker">
    <div class="top" sticky>
      <span>2024年11月18日</span>
      <!-- <span>下一次疫苗在<span style="color:#f3637a;"><TimeOut/></span>天后</span> -->
    </div>
    <!-- 出生时 -->
    <div class="born">
      <span><img src="../../assets/born.png" alt="" /></span>
      <span class="born-time1">出生时</span>
      <span class="born-time2">2024年11月18日</span>
    </div>
    <div class="vaccine">
      <dl @click="hepatitis">
        <dt class="must">必打</dt>
        <dd class="bcg"><span>乙肝疫苗</span><span class="number">第一次</span></dd>
        <dd class="explain">预防乙型病毒性肝炎</dd>
      </dl>
      <dl @click="bcgVaccine">
        <dt class="must">必打</dt>
        <dd class="bcg"><span>卡介苗</span><span class="number">第一次</span></dd>
        <dd class="explain">预防结核病</dd>
      </dl>
    </div>
    <!-- 一月龄 -->
    <div class="born">
      <span><img src="../../assets/born.png" alt="" /></span>
      <span class="born-time1">1月龄</span>
      <span class="born-time2">2024年12月18日</span>
    </div>
    <div class="vaccine">
      <dl @click="hepatitis">
        <dt class="must">必打</dt>
        <dd class="bcg"><span>乙肝疫苗</span><span class="number">第二次</span></dd>
        <dd class="explain">预防乙型病毒性肝炎</dd>
      </dl>
    </div>
    <!-- 二月龄 -->
    <div class="born">
      <span><img src="../../assets/born.png" alt="" /></span>
      <span class="born-time1">2月龄</span>
      <span class="born-time2">2025年01月18日</span>
    </div>
    <div class="vaccine">
      <dl @click="spinalCordDetail">
        <dt class="must">必打</dt>
        <dd class="bcg"><span>脊髓灰质炎疫苗(IPV)</span><span class="number">第二次</span></dd>
        <dd class="explain">预防脊髓灰质炎(小儿麻痹)</dd>
      </dl>
      <dl @click="virus">
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>轮状病毒疫苗(国产单价)</span><span class="number">第一次</span></dd>
        <dd class="explain">预防轮状病毒胃肠炎</dd>
      </dl>
      <dl @click="rotavirus">
        <dt class="selfFunded">自费</dt>
        <dd class="bcg">
          <span>轮状病毒疫苗(五价减毒活疫苗)</span><span class="number">第一次</span>
        </dd>
        <dd class="explain">预防乙型病毒性肝炎</dd>
      </dl>
      <dl @click="hib">
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>Hib疫苗</span><span class="number">第一次</span></dd>
        <dd class="explain">预防中耳炎、肺炎、脑膜炎</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>7价肺炎球菌结合疫苗</span><span class="number">第一次</span></dd>
        <dd class="explain">预防中耳炎、肺炎、脑膜炎</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>13价肺炎球菌多糖结合疫苗</span><span class="number">第一次</span></dd>
        <dd class="explain">预防肺炎球菌引起的侵袭性疾病</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>五联疫苗</span><span class="number">第一次</span></dd>
        <dd class="explain">可替代脊灰、百白破、B型流感嗜血杆菌疫苗</dd>
      </dl>
    </div>
    <!-- 3月龄 -->
    <div class="born">
      <span><img src="../../assets/born.png" alt="" /></span>
      <span class="born-time1">3月龄</span>
      <span class="born-time2">2025年02月18日</span>
    </div>
    <div class="vaccine">
      <dl>
        <dt class="must">必打</dt>
        <dd class="bcg"><span>脊髓灰质炎灭活疫苗(IPV)</span><span class="number">第二次</span></dd>
        <dd class="explain">预防脊髓灰质炎(小儿麻痹)</dd>
      </dl>
      <dl>
        <dt class="must">必打</dt>
        <dd class="bcg"><span>百白破疫苗</span><span class="number">第一次</span></dd>
        <dd class="explain">预防百日咳、白喉、破伤风</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>五联疫苗</span><span class="number">第二次</span></dd>
        <dd class="explain">可替代脊灰、百白破、B型流感嗜血杆菌疫苗</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>四联疫苗</span><span class="number">第一次</span></dd>
        <dd class="explain">可替代百白破、B型流感嗜血杆菌疫苗</dd>
      </dl>
    </div>
    <!-- 四月龄 -->
    <div class="born">
      <span><img src="../../assets/born.png" alt="" /></span>
      <span class="born-time1">4月龄</span>
      <span class="born-time2">2025年03月18日</span>
    </div>
    <div class="vaccine">
      <dl>
        <dt class="must">必打</dt>
        <dd class="bcg"><span>脊髓灰质炎灭活疫苗(IPV)</span><span class="number">第二次</span></dd>
        <dd class="explain">预防脊髓灰质炎(小儿麻痹)</dd>
      </dl>
      <dl>
        <dt class="must">必打</dt>
        <dd class="bcg"><span>百白破疫苗</span><span class="number">第二次</span></dd>
        <dd class="explain">预防百日咳、白喉、破伤风</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg">
          <span>轮状病毒疫苗(五价减毒活疫苗)</span><span class="number">第二次</span>
        </dd>
        <dd class="explain">预防乙型病毒性肝炎</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>Hib疫苗</span><span class="number">第二次</span></dd>
        <dd class="explain">预防中耳炎、肺炎、脑膜炎</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>7价肺炎球菌结合疫苗</span><span class="number">第二次</span></dd>
        <dd class="explain">预防中耳炎、肺炎、脑膜炎</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>13价肺炎球菌多糖结合疫苗</span><span class="number">第二次</span></dd>
        <dd class="explain">预防肺炎球菌引起的侵袭性疾病</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>五联疫苗</span><span class="number">第三次</span></dd>
        <dd class="explain">可替代脊灰、百白破、B型流感嗜血杆菌疫苗</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>四联疫苗</span><span class="number">第二次</span></dd>
        <dd class="explain">可替代百白破、B型流感嗜血杆菌疫苗</dd>
      </dl>
    </div>
    <!-- 5月龄 -->
    <div class="born">
      <span><img src="../../assets/born.png" alt="" /></span>
      <span class="born-time1">5月龄</span>
      <span class="born-time2">2025年04月18日</span>
    </div>
    <div class="vaccine">
      <dl>
        <dt class="must">必打</dt>
        <dd class="bcg"><span>百白破疫苗</span><span class="number">第三次</span></dd>
        <dd class="explain">预防百日咳、白喉、破伤风</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>四联疫苗</span><span class="number">第三次</span></dd>
        <dd class="explain">可替代百白破、B型流感嗜血杆菌疫苗</dd>
      </dl>
    </div>
    <!-- 六月龄 -->
    <div class="born">
      <span><img src="../../assets/born.png" alt="" /></span>
      <span class="born-time1">6月龄</span>
      <span class="born-time2">2025年05月18日</span>
    </div>
    <div class="vaccine">
      <dl>
        <dt class="must">必打</dt>
        <dd class="bcg"><span>乙肝疫苗</span><span class="number">第三次</span></dd>
        <dd class="explain">预防乙型病毒性肝炎</dd>
      </dl>
      <dl>
        <dt class="must">必打</dt>
        <dd class="bcg"><span>A群流脑疫苗</span><span class="number">第一次</span></dd>
        <dd class="explain">预防流行性脑脊髓膜炎</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>A+C群流脑结合疫苗</span><span class="number">第一次</span></dd>
        <dd class="explain">预防流行性脑脊髓膜炎</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg">
          <span>轮状病毒疫苗(五价减毒活疫苗)</span><span class="number">第三次</span>
        </dd>
        <dd class="explain">预防轮状病毒胃肠炎</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>Hib疫苗</span><span class="number">第三次</span></dd>
        <dd class="explain">预防中耳炎、肺炎、脑膜炎</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>7价肺炎球菌结合疫苗</span><span class="number">第三次</span></dd>
        <dd class="explain">预防中耳炎、肺炎、脑膜炎</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>流感疫苗</span><span class="number">第一次</span></dd>
        <dd class="explain">预防流行性感冒</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>13价肺炎球菌多糖结合疫苗</span><span class="number">第三次</span></dd>
        <dd class="explain">预防肺炎球菌引起的侵袭性疾病</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>Ev71型手足口病疫苗</span><span class="number">第一次</span></dd>
        <dd class="explain">预防手足口病</dd>
      </dl>
    </div>
    <!-- 7月 -->
    <div class="born">
      <span><img src="../../assets/born.png" alt="" /></span>
      <span class="born-time1">7月龄</span>
      <span class="born-time2">2025年06月18日</span>
    </div>
    <div class="vaccine">
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>Ev71型手足口病疫苗</span><span class="number">第二次</span></dd>
        <dd class="explain">预防手足口病</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>流感疫苗</span><span class="number">第二次</span></dd>
        <dd class="explain">预防流行性感冒病毒引起的流行性感冒</dd>
      </dl>
    </div>
    <!-- 8月 -->
    <div class="born">
      <span><img src="../../assets/born.png" alt="" /></span>
      <span class="born-time1">8月龄</span>
      <span class="born-time2">2025年07月18日</span>
    </div>
    <div class="vaccine">
      <dl>
        <dt class="must">必打</dt>
        <dd class="bcg"><span>麻腮风疫苗</span><span class="number">第一次</span></dd>
        <dd class="explain">预防麻疹、风疹、流行性腮腺炎</dd>
      </dl>
      <dl>
        <dt class="must">必打</dt>
        <dd class="bcg"><span>乙脑减毒活疫苗</span><span class="number">第一次</span></dd>
        <dd class="explain">预防流行性乙型脑炎</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>麻腮风疫苗</span><span class="number">第一次</span></dd>
        <dd class="explain">预防麻疹、风疹、流行性腮腺炎</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>乙脑灭活疫苗</span><span class="number">第二次</span></dd>
        <dd class="explain">预防流行性乙型脑炎</dd>
      </dl>
    </div>
    <!-- 9月 -->
    <div class="born">
      <span><img src="../../assets/born.png" alt="" /></span>
      <span class="born-time1">9月龄</span>
      <span class="born-time2">2025年08月18日</span>
    </div>
    <div class="vaccine">
      <dl>
        <dt class="must">必打</dt>
        <dd class="bcg"><span>A群流脑疫苗</span><span class="number">第二次</span></dd>
        <dd class="explain">预防流行性脑脊髓膜炎</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>A+C群流脑结合疫苗</span><span class="number">第二次</span></dd>
        <dd class="explain">预防流行性脑脊髓膜炎</dd>
      </dl>
    </div>
    <!-- 1岁 -->
    <div class="born">
      <span><img src="../../assets/born.png" alt="" /></span>
      <span class="born-time1">1岁</span>
      <span class="born-time2">2025年11月18日</span>
    </div>
    <div class="vaccine">
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>水痘疫苗</span><span class="number">第一次</span></dd>
        <dd class="explain">预防水痘和因水痘带状疱疹而引起的并发症</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>7价肺炎球菌结合疫苗</span><span class="number">第四次</span></dd>
        <dd class="explain">预防中耳炎、肺炎、脑膜炎</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>13价肺炎球菌多糖结合疫苗</span><span class="number">第四次</span></dd>
        <dd class="explain">预防肺炎球菌引起的侵袭性疾病</dd>
      </dl>
    </div>

    <!-- 1岁6个月 -->
    <div class="born">
      <span><img src="../../assets/born.png" alt="" /></span>
      <span class="born-time1">1岁6个月</span>
      <span class="born-time2">2026年05月18日</span>
    </div>
    <div class="vaccine">
      <dl>
        <dt class="must">必打</dt>
        <dd class="bcg"><span>麻腮风疫苗</span><span class="number">第二次</span></dd>
        <dd class="explain">预防麻疹、风疹、流行性腮腺炎</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>7价肺炎球菌结合疫苗</span><span class="number">第四次</span></dd>
        <dd class="explain">预防中耳炎、肺炎、脑膜炎</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>13价肺炎球菌多糖结合疫苗</span><span class="number">第四次</span></dd>
        <dd class="explain">预防肺炎球菌引起的侵袭性疾病</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>7价肺炎球菌结合疫苗</span><span class="number">第四次</span></dd>
        <dd class="explain">预防中耳炎、肺炎、脑膜炎</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>13价肺炎球菌多糖结合疫苗</span><span class="number">第四次</span></dd>
        <dd class="explain">预防肺炎球菌引起的侵袭性疾病</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>7价肺炎球菌结合疫苗</span><span class="number">第四次</span></dd>
        <dd class="explain">预防中耳炎、肺炎、脑膜炎</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>13价肺炎球菌多糖结合疫苗</span><span class="number">第四次</span></dd>
        <dd class="explain">预防肺炎球菌引起的侵袭性疾病</dd>
      </dl>
    </div>
    <!-- 2岁 -->
    <div class="born">
      <span><img src="../../assets/born.png" alt="" /></span>
      <span class="born-time1">2岁</span>
      <span class="born-time2">2026年11月18日</span>
    </div>
    <div class="vaccine">
      <dl>
        <dt class="must">必打</dt>
        <dd class="bcg"><span>麻腮风疫苗</span><span class="number">第二次</span></dd>
        <dd class="explain">预防麻疹、风疹、流行性腮腺炎</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>7价肺炎球菌结合疫苗</span><span class="number">第四次</span></dd>
        <dd class="explain">预防中耳炎、肺炎、脑膜炎</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>13价肺炎球菌多糖结合疫苗</span><span class="number">第四次</span></dd>
        <dd class="explain">预防肺炎球菌引起的侵袭性疾病</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>7价肺炎球菌结合疫苗</span><span class="number">第四次</span></dd>
        <dd class="explain">预防中耳炎、肺炎、脑膜炎</dd>
      </dl>
    </div>
    <!-- 3岁 -->
    <div class="born">
      <span><img src="../../assets/born.png" alt="" /></span>
      <span class="born-time1">3岁</span>
      <span class="born-time2">2026年11月18日</span>
    </div>
    <div class="vaccine">
      <dl>
        <dt class="must">必打</dt>
        <dd class="bcg"><span>麻腮风疫苗</span><span class="number">第二次</span></dd>
        <dd class="explain">预防麻疹、风疹、流行性腮腺炎</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>7价肺炎球菌结合疫苗</span><span class="number">第四次</span></dd>
        <dd class="explain">预防中耳炎、肺炎、脑膜炎</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>13价肺炎球菌多糖结合疫苗</span><span class="number">第四次</span></dd>
        <dd class="explain">预防肺炎球菌引起的侵袭性疾病</dd>
      </dl>
    </div>
    <!-- 4岁 -->
    <div class="born">
      <span><img src="../../assets/born.png" alt="" /></span>
      <span class="born-time1">4岁</span>
      <span class="born-time2">2028年11月18日</span>
    </div>
    <div class="vaccine">
      <dl>
        <dt class="must">必打</dt>
        <dd class="bcg"><span>麻腮风疫苗</span><span class="number">第二次</span></dd>
        <dd class="explain">预防麻疹、风疹、流行性腮腺炎</dd>
      </dl>
    </div>
    <!-- 6岁 -->
    <div class="born">
      <span><img src="../../assets/born.png" alt="" /></span>
      <span class="born-time1">6岁</span>
      <span class="born-time2">2026年11月18日</span>
    </div>
    <div class="vaccine">
      <dl>
        <dt class="must">必打</dt>
        <dd class="bcg"><span>麻腮风疫苗</span><span class="number">第二次</span></dd>
        <dd class="explain">预防麻疹、风疹、流行性腮腺炎</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>7价肺炎球菌结合疫苗</span><span class="number">第四次</span></dd>
        <dd class="explain">预防中耳炎、肺炎、脑膜炎</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>13价肺炎球菌多糖结合疫苗</span><span class="number">第四次</span></dd>
        <dd class="explain">预防肺炎球菌引起的侵袭性疾病</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>7价肺炎球菌结合疫苗</span><span class="number">第四次</span></dd>
        <dd class="explain">预防中耳炎、肺炎、脑膜炎</dd>
      </dl>
      <dl>
        <dt class="selfFunded">自费</dt>
        <dd class="bcg"><span>13价肺炎球菌多糖结合疫苗</span><span class="number">第四次</span></dd>
        <dd class="explain">预防肺炎球菌引起的侵袭性疾病</dd>
      </dl>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
// import TimeOut from '../../components/timeOut/index.vue'
const router = useRouter()
const onClickLeft = () => {
  router.go(-1)
}
//乙肝疫苗
const hepatitis = () => {
  router.push('/hepatitisDetail')
}
//卡介苗
const bcgVaccine = () => {
  router.push('/bcgVaccine')
}
//脊髓灰质炎疫苗
const spinalCordDetail = () => {
  router.push('/spinalCordDetail')
}
//轮状病毒疫苗(国产单价)
const virus = () => {
  router.push('/virusDetail')
}
//轮状病毒疫苗(五价减毒活疫苗)
const rotavirus = () => {
  router.push('/rotavirusDetail')
}
//Hib疫苗
const hib = () => {
  router.push('/hibDetail')
}
</script>
